<template>
	<view>
		<navBar title="用户注册"></navBar>

		<view class="register">
			<u-form :model="form" ref="uForm" label-width="150">
				<u-form-item label="用户头像" prop="user_img">
					<u-avatar size="140" :src="form.user_img"></u-avatar>
				</u-form-item>
				<view class="choose">
					<text>点击选择你喜欢的头像</text>
					<text style="font-size: 23rpx;">(可以左右滑动)</text>
				</view>
				<scroll-view scroll-x>
					<view class="tops">
						<view v-for="(item,index) in imgList" :key='item.head_id' class="tops-item">
							<image :class="imgChecked === item.head_id ? 'active' : ''" :src="item.head_img" mode=""
								@click="changeAvatar(item.head_id,item.head_img)"></image>
						</view>
					</view>
				</scroll-view>
				<u-form-item label="用户名" prop="user_name">
					<u-input v-model="form.user_name" maxlength="10" trim placeholder="请输入用户名"/>
				</u-form-item>
				<u-form-item label="账号" prop="name">
					<u-input v-model="form.name" maxlength="12" trim placeholder="请输入账号"/>
				</u-form-item>
				<u-form-item label="密码" prop="pwd">
					<u-input v-model="form.pwd" maxlength="15" trim placeholder="请输入密码"/>
				</u-form-item>
				<!-- <u-form-item label="简介" prop="intro">
					<u-input v-model="form.intro" maxlength="30" trim />
				</u-form-item> -->
				<u-form-item label="性别" prop="user_sex">
					<u-input v-model="form.user_sex" type="select" @click="isshow = true" placeholder="请选择性别" />
				</u-form-item>
				<u-form-item label="年龄" prop="age">
					<u-input v-model="form.age" maxlength="3" trim placeholder="请输入年龄"/>
				</u-form-item>
				<u-form-item label="邮箱" prop="qq_email">
					<u-input v-model="form.qq_email" maxlength="23" trim placeholder="请输入邮箱"/>
				</u-form-item>
				<u-form-item label="验证码" prop="captcha">
					<u-input v-model="form.captcha" maxlength="6" trim placeholder="请输入验证码"/>
					<u-button size="mini" @tap="getCode" type="primary">{{tips}}</u-button>
				</u-form-item>
				<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
				</u-verification-code>
			</u-form>
			<u-select v-model="isshow" :list="sexList" @confirm="confirm"></u-select>
		</view>

		<view class="btn">
			<u-button @click="submit" type="primary">注册</u-button>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getUserImg,
		getCaptcha,
		userRegister
	} from '../../utils/user.js'

	export default {
		data() {
			return {
				form: {
					user_name: '',
					name: '',
					pwd: '',
					// intro: '',
					user_sex: '',
					user_img: '',
					age: '',
					qq_email: '',
					captcha: ''
				},
				imgList: [],
				imgChecked: '0',

				isshow: false,
				//性别的选择
				sexList: [{
						value: '男',
						label: '男'
					},
					{
						value: '女',
						label: '女'
					},
				],

				seconds: 60,
				tips: '',

				rules: {
					user_img: [
						{
							required: true,
							message: '请选择头像',
							trigger: ['change', 'blur']
						},
					],
					name: [
						// 对name字段进行长度验证
						{
							min: 8,
							message: '账号不能少于8个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对name字段进行必填验证
						{
							required: true,
							message: '请填写账号',
							trigger: ['change', 'blur']
						},
					],
					pwd: [
						// 对密码字段进行长度验证
						{
							min: 8,
							message: '密码不能少于8个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写密码',
							trigger: ['change', 'blur']
						},
					],
					user_name: [
						// 对用户名字段进行长度验证
						{
							min: 4,
							message: '用户名不能少于4个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z\u4E00-\u9FA5]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含中文、字母、数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写用户名',
							trigger: ['change', 'blur']
						},
					],
					age: [
						// 对年龄字段进行长度验证
						{
							min: 1,
							message: '年龄不能少于1个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写年龄',
							trigger: ['change', 'blur']
						},
					],
					captcha: [
						// 对验证码字段进行长度验证
						{
							min: 4,
							message: '验证码不能少于4个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写验证码',
							trigger: ['change', 'blur']
						},
					],
					qq_email: [
						// 对邮箱字段进行长度验证
						{
							min: 10,
							message: '邮箱不能少于10个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '邮箱格式错误',
							trigger: ['change', 'blur']
						},
						// 对邮箱字段进行必填验证
						{
							required: true,
							message: '请填写邮箱',
							trigger: ['change', 'blur']
						},
					],
					sex: [
						// 对性别字段进行长度验证
						{
							min: 1,
							message: '性别不能为空',
							trigger: ['change', 'blur']
						},
						// 对性别字段进行必填验证
						{
							required: true,
							message: '请选择性别',
							trigger: ['change', 'blur']
						},
					]


					// intro: [{
					// 	min: 5,
					// 	message: '简介不能少于5个字',
					// 	trigger: 'change'
					// }]
				}
			};
		},
		methods: {
			//获取头像列表
			async getImg() {
				let result = await getUserImg()
				if (result.code === 200) {
					this.imgList = result.data
				}
			},
			//选择头像
			changeAvatar(id, img) {
				this.imgChecked = id
				this.form.user_img = img
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			codeChange(text) {
				this.tips = text;
			},
			//注册
			submit() {
				this.$refs.uForm.validate(async(valid) => {
					if (valid) {
						let result = await userRegister(this.form)
						if (result.code === 200) {
							this.$refs.uToast.show({
								title: '注册成功',
								type: 'success',
								url: '/pages/center/center',
								isTab: true,
								duration: 1000,
							})
						} else if (result.code === 500) {
							this.$refs.uToast.show({
								title: '邮箱已被注册',
								type: 'error',
								duration: 1000,
							})
						} else if (result.code === 505) {
							this.$refs.uToast.show({
								title: '验证码出错',
								type: 'error',
								duration: 1000,
							})
						} else if (result.code === 555) {
							this.$refs.uToast.show({
								title: '账号已注册',
								type: 'error',
								duration: 1000,
							})
						}
					}
				});
			},
			//绑定性别
			confirm(value) {
				this.form.user_sex = value[0].value
			},
			//获取验证码
			async getCode() {
				if(this.form.qq_email === ''){
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(async () => {						
						let result = await getCaptcha(this.form.qq_email)
						uni.hideLoading();
						if(result.code === 200){
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}else if(result.code === 515){
							this.$refs.uToast.show({
								title: '此邮箱已注册',
								type: 'error',
								duration: 1000,
							})
						}else{
							this.$refs.uToast.show({
								title: '出现了不知名错误',
								type: 'error',
								duration: 1000,
							})
						}
					}, 500);

				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getImg()
		}
	}
</script>

<style lang="scss" scoped>
	.tops {
		width: 100%;
		display: flex;
		margin: 0 auto;


		.tops-item {

			padding: 0 37rpx;

			image {
				border-radius: 50%;
				border: 4px solid white;
				width: 90rpx;
				height: 90rpx;


				&.active {
					border-color: #2979FF;
				}
			}
		}

		// view{
		// 	margin: 0 10rpx;
		// }
	}

	.register {
		width: 90%;
		margin: 0 auto;

		.choose {
			width: 67%;
			margin: 0 auto;
			padding: 30rpx 0;
			color: #2979FF;
			font-weight: bold;
			font-size: 28rpx;
		}
	}

	.btn {
		padding: 60rpx 0;
		width: 40%;
		margin: 0 auto;
	}
</style>
